<template>
  <div class="class-detail">
    <!-- 主要内容 -->
    <div class="main" v-if="classInfo">
      <!-- 课程基本信息卡片 -->
      <div class="info-card">
        <div class="card-header">
          <div class="class-name">{{ classInfo.courseName }} - {{ classInfo.className }}</div>
          <div class="status" :class="getStatusClass(classInfo.state)">
            {{ getStatusText(classInfo.state) }}
          </div>
        </div>

        <div class="card-content">
          <div class="info-item">
            <div class="info-label">学生姓名</div>
            <div class="info-value">{{ classInfo.studentName }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">上课日期</div>
            <div class="info-value">{{ classDate }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">上课时间</div>
            <div class="info-value">{{ classTime }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">授课老师</div>
            <div class="info-value">{{ classInfo.teacherName }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">校区</div>
            <div class="info-value">{{ classInfo.deptName }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">课程名称</div>
            <div class="info-value">{{ classInfo.courseName }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">班级名称</div>
            <div class="info-value">{{ classInfo.className }}</div>
          </div>
          <div class="info-item" v-if="classInfo.state == '0'">
            <div class="info-label">销课课时</div>
            <div class="info-value">{{ classInfo.xknumber }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">备注</div>
            <div class="info-value">{{ classInfo.cancelReason||"--" }}</div>
          </div>

          <!-- 调课后信息 -->
          <div class="info-item" v-if="showRescheduleInfo">
            <div class="info-label">补课日期</div>
            <div class="info-value">{{ rescheduleClassDate }}</div>
          </div>
          <div class="info-item" v-if="showRescheduleInfo">
            <div class="info-label">补课时间</div>
            <div class="info-value">{{ rescheduleClassTime }}</div>
          </div>
          <div class="info-item" v-if="showRescheduleInfo">
            <div class="info-label">补课老师</div>
            <div class="info-value">{{ classInfo.rescheduleCourseTeacherName }}</div>
          </div>
        </div>
      </div>

    </div>

    <!-- 底部操作按钮 -->
    <div class="bottom-action" v-if="classInfo && shouldShowActionButton">
      <van-button
        type="primary"
        block
        @click="handleActionButtonClick"
        class="leave-btn"
      >
        {{ actionButtonText }}
      </van-button>
    </div>

    <!-- 加载状态 -->
    <div class="loading" v-if="loading">
      <van-loading type="spinner" size="24px">加载中...</van-loading>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-if="!loading && !classInfo">
      <div class="empty-icon">📚</div>
      <div class="empty-text">课程信息不存在</div>
      <van-button type="primary" @click="goBack" class="empty-btn">返回首页</van-button>
    </div>

    <!-- 请假弹窗 -->
    <van-popup v-model="showLeaveDialog" position="bottom" round>
      <div class="leave-dialog">
        <div class="dialog-header">
          <div class="dialog-title">请假申请</div>
          <van-icon name="cross" class="close-icon" @click="showLeaveDialog = false" />
        </div>
        <div class="dialog-content">
          <div class="form-item">
            <div class="form-label">请假原因</div>
            <van-field
              v-model="leaveForm.reason"
              type="textarea"
              rows="3"
              placeholder="请输入请假原因"
              maxlength="200"
              show-word-limit
            />
          </div>
          <div class="form-item" style="display: none;">
            <div class="form-label">是否调课</div>
            <van-radio-group v-model="leaveForm.needReschedule">
              <van-radio name="true">是，需要调课</van-radio>
              <van-radio name="false">否，直接请假</van-radio>
            </van-radio-group>
          </div>
          <div class="form-item" v-if="leaveForm.needReschedule === 'true'">
            <div class="form-label">选择上课的班级列表</div>
            <van-field
              readonly
              clickable
              :value="leaveForm.selectedClass"
              placeholder="请选择上课的班级"
              @click="handleClassFieldClick"
            />
          </div>
        </div>
        <div class="dialog-actions">
          <van-button type="default" @click="showLeaveDialog = false" class="cancel-btn">取消</van-button>
          <van-button type="primary" @click="submitLeave" class="submit-btn">提交申请</van-button>
        </div>
      </div>
    </van-popup>


    <!-- 班级选择器 -->
    <van-popup v-model="showClassPicker" position="bottom">
      <van-picker
        show-toolbar
        title="选择上课的班级"
        :columns="classList"
        @confirm="onClassConfirm"
        @cancel="showClassPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { Icon, Button, Loading, Toast, Popup, Field, RadioGroup, Radio, Picker } from 'vant'

export default {
  name: 'ClassDetail',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Loading.name]: Loading,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker
  },
  data() {
    return {
      loading: false,
      classInfo: null,
      classId: '',
      courseScheduleId: '',
      studentId: '',
      courseId: '',
      startTime: '',
      endTime: '',
      from: '',
      showLeaveDialog: false,
      showClassPicker: false,
      leaveForm: {
        reason: '',
        needReschedule: 'false',
        selectedClass: '',
        rescheduleClassId: ''
      },
      classList: [],
      loadingClassList: false
    }
  },
  created() {
    this.classId = this.$route.params.classId || ''
    this.courseScheduleId = this.$route.params.courseScheduleId || ''
    this.studentId = this.$route.params.studentId || ''
    this.courseId = this.$route.params.id || ''
    this.startTime = this.$route.params.startTime || ''
    this.endTime = this.$route.params.endTime || ''
    this.from = this.$route.params.from || ''

    console.log('接收到的参数:', {
      classId: this.classId,
      courseScheduleId: this.courseScheduleId,
      courseId: this.id,
      studentId: this.studentId,
      startTime: this.startTime,
      endTime: this.endTime,
      from: this.from
    })

    this.loadClassDetail()
  },
  computed: {
    // 是否显示操作按钮
    shouldShowActionButton() {
      if (!this.classInfo || !this.classInfo.startTime) {
        return false
      }

      // 如果是销课状态（state == "0"），则不显示按钮
      if (this.classInfo.state == "0") {
        return false
      }

      // 如果当前时间已经过了开始时间，则不显示按钮
      // 使用更健壮的时间解析方式，避免浏览器兼容性问题
      try {
        const currentTime = new Date()
        const startTime = this.parseDateTime(this.classInfo.startTime)

        // 如果解析失败，默认显示按钮
        if (!startTime || isNaN(startTime.getTime())) {
          console.warn('解析开始时间失败，默认显示按钮')
          return true
        }

        return currentTime < startTime
      } catch (error) {
        console.error('时间比较异常:', error)
        // 异常情况下默认显示按钮
        return true
      }
    },

    // 操作按钮文本
    actionButtonText() {
      if (!this.classInfo) return '请假'

      // 如果状态是请假（state === "2"），显示取消请假
      return this.classInfo.state === "2" ? '取消请假' : '请假'
    },

    // 上课日期
    classDate() {
      if (!this.classInfo || !this.classInfo.startTime) {
        return ''
      }
      const datePart = this.classInfo.startTime.split(' ')[0]
      const [year, month, day] = datePart.split('-')
      return `${year}年${month}月${day}日`
    },

    // 上课时间
    classTime() {
      if (!this.classInfo || !this.classInfo.startTime || !this.classInfo.endTime) {
        return ''
      }

      const startTime = this.classInfo.startTime
      const endTime = this.classInfo.endTime

      const startTimePart = startTime.split(' ')[1]
      const endTimePart = endTime.split(' ')[1]

      return `${startTimePart} 至 ${endTimePart}`
    },

    // 是否显示调课后信息
    showRescheduleInfo() {
      if (!this.classInfo) {
        return false
      }

      // 检查所有调课相关字段是否都有值
      return this.classInfo.rescheduleCourseStartime &&
             this.classInfo.rescheduleCourseEndtime &&
             this.classInfo.rescheduleCourseTeacherId &&
             this.classInfo.rescheduleCourseTeacherName
    },

    // 补课日期
    rescheduleClassDate() {
      if (!this.classInfo || !this.classInfo.rescheduleCourseStartime) {
        return ''
      }

      const startTime = this.classInfo.rescheduleCourseStartime

      // 处理ISO格式的时间字符串
      const datePart = startTime.includes('T') ? startTime.split('T')[0] : startTime.split(' ')[0]
      const [year, month, day] = datePart.split('-')
      return `${year}年${month}月${day}日`
    },

    // 补课时间
    rescheduleClassTime() {
      if (!this.classInfo || !this.classInfo.rescheduleCourseStartime || !this.classInfo.rescheduleCourseEndtime) {
        return ''
      }

      const startTime = this.classInfo.rescheduleCourseStartime
      const endTime = this.classInfo.rescheduleCourseEndtime

      // 处理ISO格式的时间字符串
      const startTimePart = startTime.includes('T') ? startTime.split('T')[1].substring(0, 5) : startTime.split(' ')[1]
      const endTimePart = endTime.includes('T') ? endTime.split('T')[1].substring(0, 5) : endTime.split(' ')[1]

      return `${startTimePart} 至 ${endTimePart}`
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    // 处理操作按钮点击
    handleActionButtonClick() {
      if (this.classInfo.state === "2") {
        // 如果是请假状态，执行取消请假操作
        this.cancelLeave()
      } else {
        // 否则显示请假弹窗
        this.showLeaveDialog = true
      }
    },

    // 取消请假
    async cancelLeave() {
      try {
        // 构建取消请假数据 - 与请假接口无需调课的参数一致
        const cancelData = {
          courseScheduleId: this.classInfo.courseScheduleId,
          classId: this.classInfo.classId,
          studentId: this.classInfo.studentId,
          courseId: this.classInfo.courseId,
          courseStartime: this.classInfo.startTime,
          counrseEndtime: this.classInfo.endTime,
          cancelReason: '取消请假',
          needReschedule: 'false' // 无需调课
        }

        console.log('取消请假申请:', cancelData)

        // 调用取消请假API
        const res = await this.$http.studentCancelLeave(cancelData)
        if (res.data.success) {
          Toast.success({
            message: '取消请假成功',
            duration: 2000
          })
          // 重新加载课程详情以更新状态
          this.loadClassDetail()
        } else {
          Toast.fail(res.data.message || '取消请假失败')
        }
      } catch (error) {
        console.error('取消请假失败:', error)
        Toast.fail('取消请假失败，请稍后重试')
      }
    },

    // 加载课程详情
    async loadClassDetail() {
      this.loading = true
      try {
        // 调用API获取课程详情，传递四个参数
        const params = {
          classId: this.classId,
          courseScheduleId: this.courseScheduleId,
          courseId: this.courseId,
          studentId: this.studentId,
          startTime: this.startTime,
          endTime: this.endTime
        }

        console.log('调用API参数:', params)

        // 只调用获取课程详情的接口，不调用任何请假相关接口
        const res = await this.$http.getClassDetail(params)
        this.classInfo = res.data.result

      } catch (error) {
        console.error('加载课程详情失败:', error)
        Toast('加载课程详情失败')
      } finally {
        this.loading = false
      }
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '销课',
        1: '取消销课',
        2: '请假',
        3: '待上课'
      }
      return statusMap[status] || '待上课'
    },

    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        0: 'completed',  // 销课 - 已完成
        1: 'cancelled',  // 取消销课 - 已取消
        2: 'cancelled',  // 请假 - 已取消
        3: 'pending'     // 待上课 - 待上课
      }
      return classMap[status] || 'pending'
    },


    // 提交请假申请
    async submitLeave() {
      if (!this.leaveForm.reason.trim()) {
        Toast('请输入请假原因')
        return
      }

      // 如果需要调课，验证班级选择
      if (this.leaveForm.needReschedule === 'true') {
        if (!this.leaveForm.rescheduleClassId) {
          Toast('请选择上课的班级')
          return
        }
      }

      // 参数验证
      if (!this.classInfo.studentId) {
        Toast('学生ID不能为空')
        return
      }
      if (!this.classInfo.courseId) {
        Toast('课程ID不能为空')
        return
      }
      if (!this.classInfo.classId) {
        Toast('班级ID不能为空')
        return
      }
      if (!this.classInfo.startTime) {
        Toast('课程开始时间不能为空')
        return
      }
      if (!this.classInfo.endTime) {
        Toast('课程结束时间不能为空')
        return
      }

      try {
        // 构建请假数据
        const leaveData = {
          courseScheduleId: this.classInfo.courseScheduleId,
          classId: this.classInfo.classId,
          studentId: this.classInfo.studentId,
          courseId: this.classInfo.courseId,
          courseStartime: this.classInfo.startTime,
          counrseEndtime: this.classInfo.endTime,
          cancelReason: this.leaveForm.reason.trim(),
          needReschedule: this.leaveForm.needReschedule,
          // 添加班级选择信息
          selectedClass: this.leaveForm.selectedClass,
          rescheduleClassId: this.leaveForm.rescheduleClassId
        }

        console.log('提交请假申请:', leaveData)

        // 调用真实的请假API
        const res = await this.$http.addstudentLeave(leaveData)
        if (res.data.success) {
          Toast('请假申请提交成功')
          this.showLeaveDialog = false
          this.resetLeaveForm()
          // 重新加载课程详情以更新状态
          this.loadClassDetail()
        } else {
          Toast(res.data.message || '请假申请提交失败')
        }
      } catch (error) {
        console.error('提交请假申请失败:', error)
        Toast('请假申请提交失败，请稍后重试')
      }
    },


    // 班级选择确认
    onClassConfirm(value, index) {
      const selectedClass = this.classList[index]
      this.leaveForm.selectedClass = selectedClass.text
      this.leaveForm.rescheduleClassId = selectedClass.value
      this.showClassPicker = false
    },

    // 处理班级字段点击
    async handleClassFieldClick() {
      try {
        // 先显示加载状态
        this.loadingClassList = true

        // 构建API参数
        const params = {
          classId: this.classInfo.classId,
          studentId: this.classInfo.studentId,
          courseId: this.classInfo.courseId,
          startTime: this.classInfo.startTime,
          endTime: this.classInfo.endTime
        }

        console.log('获取班级列表参数:', params)

        // 调用API获取班级列表
        const res = await this.$http.getCourseScheduleByCourseNumber(params)

        if (res.data.success && res.data.result) {
          // 转换API返回的数据格式为picker需要的格式
          this.classList = res.data.result.map(item => {
            // 格式化显示文本：班级名称、上课开始结束时间、教师名称
            const className = item.className || item.name || '未知班级'
            const startTime = item.startTime ? this.formatStartTime(item.startTime) : ''
            const endTime = item.endTime ? this.formatEndTime(item.endTime) : ''
            const teacherName = item.teacherName || item.teacher || ''

            let displayText = className
            if (startTime && endTime) {
              displayText += ` ${startTime} 至 ${endTime}`
            }
            if (teacherName) {
              displayText += ` ${teacherName}`
            }

            return {
              text: displayText,
              value: item.id || item.id || ''
            }
          })

          // 显示班级选择器
          this.showClassPicker = true
        } else {
          Toast('获取班级列表失败')
        }
      } catch (error) {
        console.error('获取班级列表失败:', error)
        Toast('获取班级列表失败，请稍后重试')
      } finally {
        this.loadingClassList = false
      }
    },

    // 格式化时间（显示完整日期和时分）
    formatStartTime(timeString) {
      if (!timeString) return ''
      try {
        const date = new Date(timeString)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        const hours = date.getHours().toString().padStart(2, '0')
        const minutes = date.getMinutes().toString().padStart(2, '0')
        return `${year}-${month}-${day} ${hours}:${minutes}`
      } catch (error) {
        console.error('时间格式化错误:', error)
        return ''
      }
    },
     // 格式化时间（显示完整日期和时分）
    formatEndTime(timeString) {
      if (!timeString) return ''
      try {
        const date = new Date(timeString)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        const hours = date.getHours().toString().padStart(2, '0')
        const minutes = date.getMinutes().toString().padStart(2, '0')
        return `${hours}:${minutes}`
      } catch (error) {
        console.error('时间格式化错误:', error)
        return ''
      }
    },

    // 重置请假表单
    resetLeaveForm() {
      this.leaveForm = {
        reason: '',
        needReschedule: 'false',
        selectedClass: '',
        rescheduleClassId: ''
      }
    },

    // 解析日期时间字符串，兼容各种浏览器
    parseDateTime(dateTimeString) {
      if (!dateTimeString) return null

      try {
        // 处理 "2025-11-22 13:30:00" 格式
        if (dateTimeString.includes(' ')) {
          const [datePart, timePart] = dateTimeString.split(' ')
          const [year, month, day] = datePart.split('-')
          const [hours, minutes, seconds] = timePart.split(':')

          // 使用 Date 构造函数，避免不同浏览器的解析差异
          return new Date(
            parseInt(year),
            parseInt(month) - 1, // 月份从0开始
            parseInt(day),
            parseInt(hours),
            parseInt(minutes),
            seconds ? parseInt(seconds) : 0
          )
        }

        // 处理 ISO 格式 "2025-11-22T13:30:00"
        if (dateTimeString.includes('T')) {
          return new Date(dateTimeString)
        }

        // 默认使用 Date 构造函数
        return new Date(dateTimeString)
      } catch (error) {
        console.error('解析日期时间失败:', error, dateTimeString)
        return null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.class-detail {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;

  .header {
    background: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    position: relative;

    .back-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #333;
    }

    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
      text-align: center;
      flex: 1;
    }
  }

  .main {
    flex: 1;
    padding: 15px;
    padding-bottom: 80px; /* 为底部固定按钮留出空间 */

    .info-card {
      background: #fff;
      border-radius: 8px;
      margin-bottom: 15px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f0f0;

        .class-name {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          flex: 1;
          margin-right: 10px;
        }

        .status {
          font-size: 12px;
          padding: 4px 8px;
          border-radius: 12px;
          font-weight: 500;

          &.pending {
            background: #fff7e6;
            color: #fa8c16;
            border: 1px solid #ffd591;
          }

          &.completed {
            background: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
          }

          &.cancelled {
            background: #fff2f0;
            color: #ff4d4f;
            border: 1px solid #ffccc7;
          }
        }
      }

      .card-content {
        .info-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          font-size: 14px;

          &:last-child {
            margin-bottom: 0;
          }

          .info-label {
            color: #666;
            flex-shrink: 0;
            width: 100px;
          }

          .info-value {
            color: #333;
            flex: 1;
            text-align: right;
            font-weight: 500;
          }
        }
      }
    }

    .detail-section {
      background: #fff;
      border-radius: 8px;
      margin-bottom: 15px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
      }

      .detail-content {
        .detail-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          font-size: 14px;

          &:last-child {
            margin-bottom: 0;
          }

          .detail-label {
            color: #666;
            flex-shrink: 0;
            width: 80px;
          }

          .detail-value {
            color: #333;
            flex: 1;
            text-align: right;
            font-weight: 500;
          }
        }
      }
    }

    .action-section {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;

      .leave-btn {
        height: 44px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        border: 1px solid #1989fa;
        color: #1989fa;
        background: #fff;
      }
    }
  }

  .loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;

    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.6;
    }

    .empty-text {
      font-size: 16px;
      color: #666;
      margin-bottom: 16px;
    }

    .empty-btn {
      width: 120px;
    }
  }

  /* 底部操作按钮样式 */
  .bottom-action {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    z-index: 100;

    .leave-btn {
      height: 44px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      background: #1989fa;
      border: none;
      color: #fff;
    }
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .class-detail {
    .header {
      padding: 12px 15px;

      .header-title {
        font-size: 16px;
      }

      .back-btn {
        left: 15px;
        width: 28px;
        height: 28px;
      }
    }

    .main {
      padding: 10px;

      .info-card,
      .detail-section {
        padding: 14px;
        margin-bottom: 12px;
      }

      .info-card {
        .card-header {
          .class-name {
            font-size: 16px;
          }
        }

        .card-content {
          .info-item {
            font-size: 13px;

            .info-label {
              width: 90px;
            }
          }
        }
      }

      .detail-section {
        .detail-content {
          .detail-item {
            font-size: 13px;

            .detail-label {
              width: 70px;
            }
          }
        }
      }
    }

    .empty-state {
      padding: 40px 15px;

      .empty-icon {
        font-size: 40px;
      }

      .empty-text {
        font-size: 15px;
      }
    }
  }
}

/* 请假弹窗样式 */
.leave-dialog {
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;

    .dialog-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    .close-icon {
      font-size: 18px;
      color: #999;
      cursor: pointer;
    }
  }

  .dialog-content {
    .form-item {
      margin-bottom: 20px;

      .form-label {
        font-size: 14px;
        color: #333;
        margin-bottom: 8px;
        font-weight: 500;
      }

      .van-radio-group {
        .van-radio {
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .dialog-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;

    .cancel-btn,
    .submit-btn {
      flex: 1;
      height: 44px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
    }

    .cancel-btn {
      border: 1px solid #dcdfe6;
      color: #606266;
      background: #fff;
    }

    .submit-btn {
      background: #1989fa;
      border: none;
      color: #fff;
    }
  }
}

/* 小屏幕手机适配 */
@media (max-width: 375px) {
  .class-detail {
    .main {
      .info-card {
        .card-content {
          .info-item {
            .info-label {
              width: 85px;
            }
          }
        }
      }

      .detail-section {
        .detail-content {
          .detail-item {
            .detail-label {
              width: 65px;
            }
          }
        }
      }
    }
  }

  .leave-dialog {
    padding: 16px;

    .dialog-header {
      .dialog-title {
        font-size: 16px;
      }
    }

    .dialog-actions {
      .cancel-btn,
      .submit-btn {
        height: 40px;
        font-size: 15px;
      }
    }
  }
}
</style>
